import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import type { AnyObject } from '@/types'
import TableRender, { renderSlotButtons } from '@/render/TableRender'
import PreviewImage from '@/components/preview-media/PreviewImage'
import type { BulletWorkUserDto } from '@/api/bullet/types'
import { bulletWorkCancellation, getBulletWorklUserList } from '@/api/bullet'
import DialogUpdatePhoto from './DialogUpdatePhoto'
import CustomTitle from '@/components/custom-title/Index'
import { Button, Tooltip } from 'ant-design-vue'
import { confirm } from '@/utils/util'
@Component
export class BulletWork extends TableRender {

    showUpdate = false
    recordId = null as null | number

    filterConfig() {
        return {
            idCardNo: {
                name: '身份证',
                element: 'input'
            },
            phone: {
                name: '手机号',
                element: 'input',
                value: ''
            }
        } as FilterDto
    }

    tableColumnConfig() {
        return [
            {
                field: 'userName',
                title: '职工姓名',
                params: {
                    tooltip: {
                        text: (row) => row.userName,
                        content: (row) => `手机号：${row.phone}`
                    }
                },
                slots: {
                    default: 'tooltip'
                }
            },
            {
                field: 'idCardNo',
                title: '身份证号',
                width: 180
            },
            {
                field: 'totalPlans',
                title: '身份证照片',
                slots: {
                    default: ({ row }) => {
                        const src = []
                        row.ownIdCardFront && src.push(row.ownIdCardFront)
                        row.ownIdCardBack && src.push(row.ownIdCardBack)
                        return <PreviewImage src={src} text="查看"/>
                    }
                }
            },
            {
                field: 'createTime',
                title: '注册时间',
                width: 160
            },
            {
                field: 'createTime',
                title: '最后活跃时间',
                width: 160
            },
            {
                field: 'saleName',
                title: '开发信息',
                params: {
                    tooltip: {
                        underline: false,
                        link: true,
                        text: (row) => <span>点击查看</span>,
                        content: (row) => `openId：${row.openId}<br>userId：${row.userId}`,
                    }
                },
                slots: {
                    default: 'tooltip'
                }
            },
            {
                field: 'operate',
                title: '操作',
                fixed: 'right',
                width: 300,
                params: {
                    buttons: renderSlotButtons(this)
                },
                slots: {
                    default: 'buttons'
                }
            }
        ] as TableRenderColumnTypes<BulletWorkUserDto>
    }

    async onRowEdit(row: BulletWorkUserDto) {
        this.recordId = row.id
        this.showUpdate = true
    }

    async onRowRemove(row: BulletWorkUserDto) {
        await confirm('确定要注销该员工吗？', '提示')
        await bulletWorkCancellation(row)
        this.reloadPage()
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getBulletWorklUserList({
            pageNum: page,
            pageSize: size,
            isDelete: 0,
            ...filters
        })
    }

    render() {
        return (
            <div class="h-full flex flex-col">
                <CustomTitle>子弹工作职工账号管理</CustomTitle>
                {super.renderFilter()}
                <CustomTitle>信息列表</CustomTitle>
                <div class="flex-1 h-full">
                    {super.renderTable()}
                </div>
                <DialogUpdatePhoto v-model:show={this.showUpdate} recordId={this.recordId as number} onRefresh={this.reloadPage}/>
            </div>
        )
    }
}

export default toNative<{}, {}>(BulletWork)
